<template>
  <div>
    <div class="select">
      <el-select
        v-model="title"
        :placeholder="title"
        @change="ExamOrExperiment"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </div>
    <template>
      <experiment-score v-if="isExperimentModule"></experiment-score>
      <exam-score-module v-else></exam-score-module>
    </template>
  </div>
</template>

<script>
import ExamScoreModule from "./ExamScoreModule.vue";
import ExperimentScore from "./ExperimentScore.vue";

export default {
  components: {
    ExamScoreModule,
    ExperimentScore
  },
  data() {
    return {
      isExperimentModule: true,
      title: "实验成绩",
      options: [
        {
          value: "1",
          label: "实验成绩"
        },
        {
          value: "2",
          label: "考试成绩"
        }
      ]
    };
  },
  methods: {
    ExamOrExperiment() {
      if (this.title === "实验成绩") {
        this.isExperimentModule = true;
      } else {
        this.isExperimentModule = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.select {
  text-align: right;
  position: relative;
  margin-bottom: -15px;
  .el-select {
    height: 40px;
    margin-right: 20px;
  }
  /deep/ .el-input__inner {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    color: rgba(119, 111, 111, 0.972);
  }
}
</style>
